<template>
  <div class="box-map">
    <baidu-map
      v-bind:style="mapStyle"
      class="bm-view"
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
      @click="getClickInfo"
      @moving="syncCenterAndZoom"
      @moveend="syncCenterAndZoom"
      @zoomend="syncCenterAndZoom"
    >
      <bm-view style="width: 100%; height: 100%"></bm-view>
      <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :showAddressBar="true"
        :autoLocation="true"
      ></bm-geolocation>
      <!-- 单点 -->
      <bm-marker
        v-if="lngLat"
        :position="{ lng: center.lng, lat: center.lat }"
        :dragging="true"
        @dragend="getClickInfo"
        :icon="{
          url: mapIcon1,
          size: { width: 24, height: 24 },
          anchor: { width: -12, height: -24 },
        }"
      ></bm-marker>
      <!-- 批量点 -->
      <div v-if="points.length && more">
        <bm-marker
          v-for="(item, ind) in points"
          :title="ind"
          :key="ind"
          :position="{ lng: item[0], lat: item[1] }"
          :icon="{
            url: mapIcon2,
            size: { width: 24, height: 24 },
            anchor: { width: -12, height: -24 },
          }"
          @mouseover="showTips"
        ></bm-marker>
      </div>
    </baidu-map>
  </div>
</template>
<script>
import {
  BaiduMap,
  BmControl,
  BmView,
  BmAutoComplete,
  BmLocalSearch,
  BmMarker,
} from "vue-baidu-map";
import mapIcon1 from "@assets/img/mapIcon1.png";
import mapIcon2 from "@assets/img/mapIcon2.png";
export default {
  components: {
    BaiduMap,
    BmControl,
    BmView,
    BmAutoComplete,
    BmLocalSearch,
    BmMarker,
  },
  data: function () {
    return {
      keyword: "", // 通过BmLocalSearch搜素地址，然后再进行定位
      keyType: "1", //搜索默认值,1:搜项目，2：搜地点
      pName: "", //搜素项目
      mapStyle: {
        width: "100%",
        height: "100%",
      },
      center: { lng: 114.31158155, lat: 30.59846674 }, // 地图中心位置(也是标记点图标的位置)
      zoom: 11, // 地图层级
      addres: "", // 地址
      pointName: "", //编辑状态下，根据初始坐标查询的位置名称
      mapIcon1: mapIcon1,
      mapIcon2: mapIcon2,
    };
  },
  props: {
    lngLat: {
      type: String,
      default: "",
    },
    points: {
      type: Array,
      default: [],
    },
    more: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    lngLat: {
      handler(newVal, oldVal) {
        if (newVal != "") {
          let arr = newVal.split(",");
          if (arr.length == 2) {
            this.center = { lng: arr[0], lat: arr[1] };
            this.zoom = 19;
          }
        }
      },
    },
    more: {
      handler(newVal) {
        if (newVal === true) {
          this.zoom = 5;
        }
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      if (!this.lngLat) {
        // this.getLocationInfo();
      }
    });
  },
  methods: {
    /***
     * 地图点击事件、定位图标拖拽移动事件
     */
    getClickInfo(e) {
      let that = this;
      this.center.lng = e.point.lng;
      this.center.lat = e.point.lat;
      var geoc = new BMap.Geocoder();
      geoc.getLocation(e.point, function (rs) {
        var addComp = rs.addressComponents;
        let addr =
          addComp.province +
          addComp.city +
          addComp.district +
          addComp.street +
          addComp.streetNumber;
        that.addres = addr;
        let data = { ...that.center, addr, rs };
        that.$emit("locationInfo", data);
      });
    },
    //获取当前位置
    getLocationInfo() {
      let that = this;
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function (res) {
        that.center = { lng: res.longitude, lat: res.latitude };
      });
    },
    syncCenterAndZoom(e) {
      this.zoom = e.target.getZoom();
    },
    //搜索关键词类型切换
    keyTypeChange(val) {
      this.keyType = val;
      this.keyword = "";
      this.pName = "";
    },
  },
};
</script>

<style scoped>
.box-map {
  padding-top: 40px;
  width: 100%;
  height: 100%;
}
</style>
